<template>
  <div id="main">
    <!-- 搜索栏 -->
    <van-sticky>
      <div class="nav">
        <img :src="back" alt="" @click="handleBack" class="back">
        <van-search
            style="height:40px"
            v-model="searchValue"
            shape="round"
            background="#f29600"
            @input="handleClear"
            placeholder="搜索你感兴趣的话题或爱好">
        </van-search>
        <div class="nav-btn">
          <span @click.prevent="handleSearch">搜索</span>
        </div>
      </div>
    </van-sticky>
    <!-- 历史搜索内容 -->
    <div class="content" v-if="searchShow">
      <div class="history">
        <div class="title">
          <div class="title-name">历史搜索</div>
          <div class="del" @click="handleDelete"><img :src="del" alt="" class="delIcon" width="13px" height="18px">
          </div>
        </div>
        <div class="tags">
          <div v-for="(item,index) in tagList" :key="index" class="tag" @click="handleSelect(item)">
            <!-- <el-tag size="medium"  type="info">{{item.name}}</el-tag> -->
            <span style="overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;width: 80px;
                  text-align: center;
            ">{{ item.content }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索tab列表 -->
    <!-- <search-list ref="search" v-if="!searchShow" :searchValue="searchValue"></search-list> -->
    <div v-if="!searchShow">
      <van-tabs v-model="activeName" color="#f29600" title-active-color="#f29600">
        <van-tab title="资讯" name="info">
        </van-tab>
        <van-tab title="动态" name="trend"></van-tab>
        <van-tab title="作者" name="author"></van-tab>
      </van-tabs>
      <search-info v-if="activeName === 'info'" :searchValue="searchValue" ref="info" :token="token"></search-info>
      <searchTrends v-if="activeName === 'trend'" :searchValue="searchValue" ref="trend" :token="token"></searchTrends>
      <search-author v-if="activeName === 'author'" :searchValue="searchValue" ref="author"
                     :token="token"></search-author>

    </div>

  </div>
</template>

<script>
// import searchList from './searchList.vue'
import {querySearchLogApi, deleteSearchLogApi} from '@/api/share.js'
import searchAuthor from './search-author.vue'
import searchInfo from './search-info.vue'
import searchTrends from './search-trends.vue'
import {Toast} from 'vant';
import {antiShake} from '@/utils/antie.js'

export default {
  components: {searchAuthor, searchInfo, searchTrends},
  name: "sy",
  data() {
    return {
      searchValue: '',
      tagList: [],
      searchShow: true,
      back: require("@/assets/search/back.png"),
      del: require("@/assets/search/clear.png"),
      activeName: 'info',
      searchContent: '',
      token: ''
    }
  },
  created() {

  },
  mounted() {
    this.token = !this.getParam("token") ? "" : decodeURI(this.getParam("token"))
    this.getLogList()
    this.activeName = 'info'
    // console.log(this.token)
  },
  methods: {
    getParam(name) {
      if (window.location.hash.indexOf("?") != -1) {
        const query = window.location.hash.split("?")[1];
        const vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == name) {
            return pair[1];
          }
        }
      } else {
        return "";
      }
    },
    handleSearch: antiShake(function () {//搜索
    // console.log(this.searchValue,'11111111111')
      if (this.searchValue) {
        this.searchShow = false
        if (this.activeName === 'info') {
          this.$nextTick(() => {
            this.$refs.info.init()
            // this.$refs.info.getDataSearch()
          })
        } else if (this.activeName === 'trend') {
          this.$nextTick(() => {
            this.$refs.trend.init()
            // this.$refs.info.getDataSearch()
          })
        } else if (this.activeName === 'author') {
          this.$refs.author.init()
        }
      } else {
        Toast('请输入搜索内容')
      }
    }),
    handleClear() {//清空事件
      if (!this.searchValue) {
        this.searchShow = true
        this.getLogList()
      }
    },
    handleDelete() {//删除搜索记录
      let data = {
        token: this.token
      }
      deleteSearchLogApi(data).then((res) => {
        this.getLogList()
      })
    },
    handleBack() {//返回
      this.$router.go(-1)
      let message = {
        action: 'showBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    handleSelect(val) {
      this.searchValue = val.content ? val.content : ''
    },
    getLogList() {//搜索历史记录列表
      // let data = {
      //   token: this.token
      // }
      console.log('getLog')
      querySearchLogApi().then((res) => {
        this.tagList = res.data.records
      })
    },
  }
}
</script>

<style lang="less" scoped>
#main {
  width: 100%;
   height: 100vh;
  overflow-y: scroll;
  .nav {
    display: flex;
    // height: 40px;
    background: #f29600;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    padding: 4px 16px 7px 16px;

    .back {
      cursor: pointer;
    }

    .van-search {
      padding: 0;
      background-color: #fff;
      width: 283px;
      height: 33px;
      margin: 0 6px 0 15px;

    }

    @media screen and (max-width: 389px) {
      .van-search {
        padding: 0;
        background-color: #fff;
        width: 260px;
        height: 33px;
        margin: 0 5px 0 15px;

      }

    }
    @media screen and (max-width: 374px) {
      .van-search {
        padding: 0;
        background-color: #fff;
        width: 220px;
        height: 33px;
        margin: 0 3px 0 10px;

      }

    }

    .nav-btn {
      height: 22px;
      font-size: 15px;
      padding: 3px 7px;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      cursor: pointer;
    }
  }

  .content {
    padding: 0 10px;

    .history {
      padding: 10px 5px;
      color: #c2c2c2;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title-name {
          font-size: 16px;
        }

        .del {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .tags {
        display: flex;
        padding: 10px 0;
        flex-wrap: wrap;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24.62px;
        color: rgba(56, 56, 56, 1);

        .tag {
          padding: 5px 8px;
          height: 28px;
          opacity: 1;
          border-radius: 8px;
          background: rgba(229, 229, 229, 1);
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 5px;
          line-height: 24.62px;
          color: rgba(56, 56, 56, 1);
          max-height: 100px;
        }
      }
    }
  }

  .van-tabs {

    padding: 10px;
  }

  /deep/ .van-tab {
    border-bottom: 1px solid #f5f7fa;
  }

  /deep/ .van-tab__text--ellipsis {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 20px;
  }
}
</style>
